<template>
  <div class="p-10 h-[350px] flex flex-col justify-between">
    <div>
      <h2 class="text-center text-lg mb-4">会员登录</h2>
      <Form @submit="onSubmit" :validation-schema="schema">
        <Field
          name="name"
          class="lj-input"
          placeholder="请输入账号"
          value="刘晶"
        />
        <ErrorMessage name="name" as="div" class="lj-error" />

        <Field
          name="password"
          class="lj-input mt-4"
          placeholder="请输入密码"
          value="123456"
          type="password"
        />
        <ErrorMessage name="password" as="div" class="lj-error" />

        <button type="submit" class="lj-button mt-4">登录</button>
      </Form>
    </div>

    <div class="grid grid-flow-col gap-2 justify-center items-center mt-5">
      <el-button link class="lj-a" @click="$router.push({ name: 'register' })">
        会员注册
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import v from "@/plugins/validate";
import useAuthStore from "@/states/useAuthStore";
import store from "@/utils/store";
import { useRouter } from "vue-router";

const { yup, Form, Field, ErrorMessage } = v;

const schema = yup.object({
  // email: yup.string().required().email().label("账号"),
  name: yup.string().required().label("账号"),
  password: yup.string().required().min(6).label("密码"),
});

const { login } = useAuthStore();
const router = useRouter();

async function onSubmit(values: any) {
  const {
    data: { token },
  } = await login(values);

  store.set("token", { expire: 100000000, token });
  router.push({ name: "proj" });
}
</script>

<style lang="scss" scoped>
.lj-a {
  @apply text-sm text-gray-500;
}
</style>

<script lang="ts">
export default {
  route: { name: "login" },
};
</script>
